import {
  IPivotStyleProps,
  IPivotStyles,
  IStackProps,
  IStackStyles,
  IStyleFunctionOrObject,
  Pivot,
  PivotItem,
  Stack,
} from "@fluentui/react";
import { Popover } from "antd";
import * as React from "react";
import { useLocation, useNavigate } from "react-router";
import Alymodel from "../../mysql_interface/model";
import { asynclogout } from "../api/api";
import { Iroot } from "../interface";
import login from "../utils/login";

const bjsc = 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/logo_2023_02_06.png'

const styles: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles> = {
  root: {
    backgroundImage: "",
    color: "#fff",
  },
  link: {
    color: "#fff",
    height: "40px",
    "&:hover": {
      // backgroundColor: "#5da869",
      backgroundColor: "var(--color-dark)",
      color: "#fff",
    },
    "&:active": {
      backgroundColor: "var(--color-dark)",
      color: "#fff",
    },
  },
  linkIsSelected: {
    "&:before": {
      backgroundColor: "#fff",
    },
  },
};

const stylesleft: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
  root: {
    width: 210,
    height: "100%",
    lineHeight: "var(--nav-height)",
  },
};

const bjscheaderimage: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
  root: {
    height: 'calc(var(--el-header-height) - var(--nav-height))',
    backgroundImage: 'url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/header_2023_02_06.jpg.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'auto 100%',
    backgroundPosition: 'center',
  }
}

const stylesright: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
  root: {
    width: 280,
    height: "100%",
    lineHeight: "var(--nav-height)",
    textAlign: "center",
    color: "#fff",
  },
};
interface P extends Iroot {
  getuser?: Alymodel.IMuser;
  setshow: React.Dispatch<React.SetStateAction<boolean>>
  setuser: React.Dispatch<React.SetStateAction<Alymodel.IMuser | undefined>>
}

const ProImage = () => {
  return (
    <div style={{ marginBottom: "12px" }}>
      如系统使用有疑问，
      <br />
      可通过微信联系老师
      <br />
      <img
        style={{ marginTop: "12px" }}
        src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/erweima_guhang.jpg"
        width="144"
        height="144"
        alt=""
      />
    </div>
  );
};

export const Nav: React.FunctionComponent<P> = (p) => {
  const [selectedKey, setSelectedKey] = React.useState<string>();
  const loc = useLocation()
  const Navigate = useNavigate()
  function handleLinkClick(item?: PivotItem) {
    if (item && item.props.itemKey) {
      if (item.props.itemKey === "admin") {
        location.href = "https://data.hterobot.com/admin.html#/index";
      } else if (item.props.itemKey === "teacher") {
        location.href = "/teacher.html";
      } else if (item.props.itemKey === "oj") {
        location.href = "https://bjsc.hterobot.com";
      } else {
        Navigate(item.props.itemKey)
      }
    }
  }

  React.useEffect(() => {
    setSelectedKey(loc.pathname);
  }, [loc.pathname]);

  const loginclick = () => {
    if (!p.getuser) {
      login(Navigate)
      p.setshow(true)
    } else {
      asynclogout().then(e => {
        p.setuser(undefined)
        login(Navigate)
      })
    }
  }

  return (
    <Stack disableShrink >
      <Stack horizontal disableShrink styles={bjscheaderimage}>
        <div className="container-xxl" style={{ position: 'relative', height: '100%' }}>
          <img
            src={bjsc}
            alt=""
            height={64}
            style={{ position: 'absolute', bottom: '10px', left: '10px' }}
          />
        </div>
      </Stack>
      <div className="container-xxl">
        <div className="row">
          <Stack horizontal disableShrink className="col">

            <Stack.Item grow>
              <Pivot
                styles={styles}
                headersOnly={true}
                selectedKey={selectedKey}
                onLinkClick={handleLinkClick}
                aria-label="Basic Pivot Example"
                style={{
                  display: p.getuser ? 'block' : 'none'
                }}
              >
                <PivotItem
                  headerText="我的课堂"
                  itemKey="/secure/myclass"
                ></PivotItem>
                <PivotItem
                  headerText="软件下载"
                  itemKey="/secure/download"
                ></PivotItem>
                <PivotItem headerText="题库" itemKey="oj"></PivotItem>
              </Pivot>
            </Stack.Item>
            <Stack.Item styles={stylesright}>
              <Popover placement="bottom" content={ProImage} trigger="click">
                <img
                  style={{ transform: "translateY(-2px)" }}
                  className="cu"
                  width={19}
                  src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Chat%20Help.svg"
                />
                <span className="cu"> &nbsp;帮助&nbsp;&nbsp;&nbsp;&nbsp;</span>
              </Popover>
              <img
                width={20}
                height={20}
                style={{ borderRadius: "50%", display: p.getuser ? 'inline-block' : 'none' }}
                src={p.getuser?.headimg}
              />
              <span  >&nbsp;&nbsp;&nbsp; {p.getuser?.username}</span>
              <span style={{ cursor: 'pointer', color: '#fff' }} onClick={loginclick}>&nbsp;&nbsp;&nbsp; {!p.getuser ? '登录' : '退出'}</span>
            </Stack.Item>
          </Stack>
        </div>
      </div>
    </Stack>

  );
};
